<template>
  <div>
    <div style="font-size:18px;">banner管理</div>
    <hr>
    <br>   
    
    <div class="app-container calendar-list-container membermanage">
      <div class="filter-container">
       <el-button class="filter-item" style="margin-left: 30px;" type="primary"  icon="plus" @click="addBanner">新增</el-button>
      </div>

      <!-- 表身 -->
      <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width:870px;">
        
        <el-table-column align="center" label="序号" width="70"  type="index" >
        </el-table-column>
        <el-table-column align="center" label="图像" width="300">
          <template scope="scope">
            <img v-if="scope.row.img" :src="scope.row.img" class="avatar">
            <span v-else="!scope.row.img">图片缺失</span>
          </template>
        </el-table-column>
        <el-table-column  align="center" label="链接" width="300">
          <template scope="scope">
            <span>{{scope.row.link}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">
          <template scope="scope">
            <el-button size="small" type="warning"  @click="handleChangeBanner(scope.row)">修改
            </el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>

        <!-- 更改广告图 -->
      <el-dialog :title="bannerTitle" :visible.sync="changeBanner">
        <el-form class="small-space" :model="changeForm" label-position="left" label-width="100px" style='max-width: 400px; margin-left:50px;'>
          <el-form-item label="banner图片:">
            <el-upload
              class="avatar-uploader"
              action="http://www.chenyekeji.com/21market/image/upload2"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="banner链接:">
            <el-input v-model="changeForm.link" style="width: 200px;"></el-input>
          </el-form-item>
        </el-form>
      
        <div class="footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="handleAdd">确 定</el-button>
        </div>
      </el-dialog>
    </div>


  </div>
</template>
<script>
    import $ from 'jquery';
    import Vue from 'vue';

  export default {
    name: 'advertise',
    directives: {

    },
    data() {
        return {
          rid: '',
          school: '',
          shop: '',
          changeBanner:false,
          list: null,
          total: null,
          listLoading: false,
          imageUrl: null,
          bannerTitle: null,
          listQuery: {
            pageNumber: 1,
            pageSize: 10,
            param: {
              shopId: ''
            },
          },
          changeForm: {
            id: '',
            img: '',
            link: '',
            shopId: ''
          },
          dialogFormVisible: false,
          tableKey: 0
        };
    },
   filters: {
    typeFilter(status) {
      const statusMap = {
        0: 'success',
        1: 'danger',
        2: 'info',
        3: 'warning'
      }
      return statusMap[status]
    },
    statusFilter(type) {
      let key2value = {
            "0": "正常",
            "1": "禁用"
      }
      return key2value[type]
    },
  },
  created() {
    this.rid = localStorage.getItem('rid');
    this.school = JSON.parse(localStorage.getItem('school'));
    this.shop = JSON.parse(localStorage.getItem('shop'));
    // this.userData = JSON.parse(localStorage.getItem('userData'));
    
  },
  mounted(){
    this.listQuery.param.shopId = this.shop.shopId
    this.getList()   //banner列表
  },
  methods: {
    getList() {
      let self = this
      self.myajax("/banner/list",self.listQuery,function(res){
        // self.listLoading = false
        self.list = res.data.list
        self.total = res.data.total
      });
    },
    addBanner() {
      this.changeBanner = true
      this.changeForm.id = ''
      this.changeForm.img = ''
      this.changeForm.link = ''
      this.changeForm.shopId = this.shop.shopId
      this.imageUrl = ''
      this.bannerTitle = '新增banner'
    },
    handleChangeBanner(row){                        
      this.changeBanner = true
      this.changeForm.id = row.id
      this.changeForm.img = row.img
      this.changeForm.link = row.link
      this.imageUrl = row.img
      this.bannerTitle = '修改banner'
    },
    handleAdd(status){
      let self = this
      if(this.changeForm.id){
        self.myajax("/banner/update",this.changeForm,(res)=>{  
        console.log(res)   
          if(res.code == 1000){
            this.$message({
              type: 'success',
              message: '修改成功!',
              duration: 2000
            });
            for(var key in this.changeForm){
              this.changeForm[key] = null
            }
            this.changeBanner = false
            this.getList()
          }else{

          }
        })
      }else{
        if(this.changeForm.link&&this.changeForm.img){
          self.myajax("/banner/create",this.changeForm,(res)=>{  
            console.log(res)     
            if(res.code == 1000){
              this.$message({
                type: 'success',
                message: '添加成功!',
                duration: 2000
              });
              this.changeForm.id=""
              this.changeForm.link=""
              this.changeForm.img=""
              this.getList()
              this.changeBanner = false
            }else{

            }
          })
        }else{
          this.$message({
            type: 'error',
            message: '所填信息不全!',
            duration: 2000
          });
          this.changeBanner = false
        }
      }
    },
    handleDelete(row) {  
      let self = this                       //删除banner
      this.$confirm('此操作将永久删除该banner, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        self.myajax("/banner/deleteById",{id:row.id},(res)=>{
          self.getList()
          self.$message({
            type: 'success',
            message: '删除成功!',
            duration: 1000
          });
        })
      }).catch(() => {
      
      }); 
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.changeForm.img = Vue.prototype.$host + res
      console.log(this.imageUrl)
      console.log(res)
    },
    beforeAvatarUpload(file) {
      const isJPG = (file.type === 'image/jpeg')||(file.type === 'image/png');
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/png 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    cancel: function(){
      this.changeBanner = false
    }
  }
};
</script>
<style scoped>
    .filter-container {
    padding-bottom: 10px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #bfcbd9;
    border-radius: 6px;
  }
  .el-upload {
    display: inline-block;
    text-align: center;
    cursor: pointer;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 140px;
    height: 140px;
    line-height: 140px;
    text-align: center;
  }
  .avatar {
    width: 260px;
    height: 120px;
    display: block;
  }
  .el-dialog .avatar {
    width: 140px;
    height: 140px;
    display: block;
  }
</style>
